<template>
  <!-- 基础题库 -->
  <div class="dashboard-container">
    <div class='app-container'>
      <el-card class="box-card">
        <!-- 说明：目前支持学科和关键字条件筛选 -->
        <div class="info">
          <span>说明：目前支持学科和关键字条件筛选</span>
          <el-button
            icon="el-icon-edit"
            type="success"
            class="addbtn"
            size="small"
            @click='$router.push("new")'
          >新增试题</el-button>
        </div>
        <!-- /说明：目前支持学科和关键字条件筛选 -->

        <!-- 查询条件区域 -->
        <el-form
          :model="form"
          label-width="80px"
        >
          <!-- 第一行 搜索条件 -->
          <div class="diyi">
            <!-- 学科 -->
            <el-form-item label="学科">
              <el-select
                v-model="form.subjectID"
                placeholder="请选择"
                @change="handleSub(form.subjectID)"
              >
                <el-option
                  v-for="(item,index) in subs"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>

              </el-select>
            </el-form-item>
            <!-- 二级目录 -->
            <el-form-item label="二级目录">
              <el-select
                v-model="form.catalogID"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item,index) in tils"
                  :key="index"
                  :value="item.label"
                ></el-option>

              </el-select>
            </el-form-item>
            <!-- 标签 -->
            <el-form-item label="标签">
              <el-select
                v-model="form.tags"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item,index) in Tags"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>

              </el-select>
            </el-form-item>
            <!-- 关键字 -->
            <el-form-item label="关键字">
              <el-input v-model="form.keyword"></el-input>
            </el-form-item>
          </div>
          <!-- 第二行 搜索条件-->
          <div class="dier">
            <!-- 试题类型 -->
            <el-form-item label="试题类型">
              <el-select
                v-model="form.questionType"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item,index) in constant.questionsType"
                  :key="index"
                  :value="item.label"
                ></el-option>

              </el-select>
            </el-form-item>
            <!-- 难度 -->
            <el-form-item label="难度">
              <el-select
                v-model="form.difficulty"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item,index) in constant.difficults"
                  :key="index"
                  :value="item.label"
                ></el-option>

              </el-select>
            </el-form-item>
            <!-- 方向 -->
            <el-form-item label="方向">
              <el-select
                v-model="form.direction"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item,index) in constant.directions"
                  :key="index"
                  :value="item"
                ></el-option>

              </el-select>
            </el-form-item>
            <!-- 录入人 -->
            <el-form-item label="录入人">
              <el-select
                v-model="form.creatorID"
                placeholder="请选择"
              >
                <el-option value="admin"></el-option>

              </el-select>
            </el-form-item>
          </div>
          <div class="disan">
            <!-- 题目备注 -->
            <el-form-item label="题目备注">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
            <!-- 企业简称 -->
            <el-form-item label="企业简称">
              <el-input v-model="form.shortName"></el-input>
            </el-form-item>
            <!-- 城市 -->
            <el-form-item
              label="城市"
              class="city0"
            >
              <el-select
                class="city1"
                v-model="form.province"
                placeholder="请选择"
                @change="handleProvince"
              >
                <!-- 渲染城市列表数据 完成 -->
                <el-option
                  v-for="item in citySelect.province"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>

              <el-select
                class="city1 city2"
                v-model="form.city"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in citySelect.cityDate"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 按钮 搜索 -->
            <el-form-item class="s-btn">
              <el-button
                size="small"
                @click="resetForm"
              >清除</el-button>
              <!--  -->
              <el-button
                type="primary"
                size="small"
                @click='search'
              >搜索</el-button>
            </el-form-item>
          </div>
        </el-form>
        <!--/ 查询条件区域 -->

        <!-- 灰色数据 -->
        <div class="hui">
          <i class='el-icon-info'></i>
          <span class="shuju">数据一共{{total}}条</span>
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="questionsList.items"
          style="width: 100%"
        >
          <el-table-column
            label="试题编号"
            width="120"
            prop="number"
          >
          </el-table-column>
          <el-table-column
            label="学科"
            prop="subject"
          >
          </el-table-column>
          <el-table-column
            label="目录"
            prop="catalog"
          >
          </el-table-column>
          <el-table-column label="题型">
            <span
              slot-scope='scope'
              v-if='scope.row.questionType==1'
            >单选题</span>
            <span
              slot-scope='scope'
              v-else-if='scope.row.questionType==3'
            >简答题</span>
            <span
              slot-scope='scope'
              v-else-if='scope.row.questionType==2'
            >多选题</span>
          </el-table-column>

          <el-table-column
            label="题干"
            prop="question"
          >
          </el-table-column>
          <el-table-column
            label="录入时间"
            width="170"
            prop="addDate"
          >

          </el-table-column>
          <el-table-column label="难度">
            <span
              slot-scope='scope'
              v-if='scope.row.difficulty==1'
            >简单</span>
            <span
              slot-scope='scope'
              v-else-if='scope.row.difficulty==2'
            >一般</span>
            <span
              slot-scope='scope'
              v-else-if='scope.row.difficulty==3'
            >困难</span>
          </el-table-column>

          <el-table-column
            label="录入人"
            prop="creator"
          >
          </el-table-column>
          <el-table-column
            width="260"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                class='is-plain1'
                type="primary"
                circle
                @click="viewBox(scope.row)"
              >
                <i class="el-icon-view"> </i>
              </el-button>
              <el-button
                class='is-plain2'
                type="success"
                circle
                @click="$router.push({name:'questions-new',query:{id:scope.row.id}})"
              >
                <i class="el-icon-edit"> </i>
              </el-button>
              <el-button
                v-if="scope.row.status!='deleted'"
                class='is-plain3'
                type="danger"
                circle
                @click="deleteQus(scope.row.id)"
              >
                <i class="el-icon-delete"> </i>
              </el-button>
              <el-button
                class='is-plain4'
                type="warning"
                circle
                @click="addChoice(scope.row)"
              >
                <i class="el-icon-check"> </i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格结束 -->
        <!-- 分页 -->
        <div class="page">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Number(queryInfo.page)"
            :total="Number(total)"
            :page-size="Number(queryInfo.pagesize)"
            :page-sizes="[2,5,10, 20]"
            layout="sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
        <!-- end -->
        <!-- 预览 区域 -->
        <el-dialog
          title='题目预览'
          :visible.sync="viewVisible"
          width="50%"
        >

          <el-form
            class="view-form"
            ref="form"
            :model="form"
            label-width="80px"
          >
            <div class="view-con1">
              <el-form-item label="【题型】">
                <span v-if="yulan.questionType==1">单选</span>
                <span v-else-if="yulan.questionType==2">多选</span>
                <span v-else-if="yulan.questionType==3">简答</span>
              </el-form-item>
              <el-form-item label="【编号】">
                <span>{{yulan.id}}</span>
              </el-form-item>
              <el-form-item label="【难度】">

                <span v-if="yulan.difficulty==1">简单</span>
                <span v-else-if="yulan.difficulty==2">一般</span>
                <span v-else>困难</span>

              </el-form-item>
              <el-form-item label="【标签】">
                <span>{{yulan.tags}}</span>
              </el-form-item>
            </div>
            <div class="view-con1 view-con2">
              <el-form-item label="【学科】">
                <span>{{yulan.subject}}</span>
              </el-form-item>
              <el-form-item label="【目录】">
                <span>{{yulan.catalog}}</span>
              </el-form-item>
              <el-form-item label="【方向】">
                <span>{{yulan.direction}}</span>
              </el-form-item>
              <el-form-item>
                <!-- 占位 -->
              </el-form-item>
            </div>
            <hr>
            <div class="view-qus">
              <el-form-item label="【题干】:">
                <br>
                <span class='tigan'>{{yulan.question}}</span>
              </el-form-item>
            </div>
            <div class="choose">
              <div v-if="yulan.questionType==1">
                <span>单选题 &nbsp; &nbsp;&nbsp;
                  &nbsp;选项：（以下选中的选项为正确答案）</span>
                <br>
                <br>
                <el-radio
                  class='xuanze'
                  v-for="item in yulanson.options"
                  :key="item.id"
                  :value="item.isRight"
                  :label="1"
                >
                  {{item.title}}
                </el-radio>
              </div>
              <div v-else-if="yulan.questionType==2">
                <span>多选题 &nbsp; &nbsp;&nbsp;
                  &nbsp;选项：（以下选中的选项为正确答案）</span>
                <br>
                <br>
                <el-radio
                  class='xuanze'
                  v-for="item in yulanson.options"
                  :key="item.id"
                  :value="item.isRight"
                  :checked="item.isRight"
                  :label="1"
                >
                  {{item.title}}
                </el-radio>

              </div>
              <div v-else-if="yulan.questionType==3">
                <span>简答题 &nbsp; &nbsp;&nbsp;
                  &nbsp;选项：（以下为正确答案）</span>
                <br>
                <br>
                <div
                  class="answers"
                  v-html="yulan.answer"
                ></div>
              </div>
            </div>
            <hr>
            <!-- 参考答案 视频 -->
            <div class="video-qus">
              <el-form-item label="【参考答案】:">
                <el-button
                  type="danger"
                  size="small"
                  @click='videoShow'
                >视频答案预览</el-button>
              </el-form-item>

              <video
                v-show="videoShowing"
                class="video"
                :src="videoAddress"
              ></video>
            </div>
            <hr>
            <!-- 答案解析 -->
            <el-form-item
              class="brr brr1"
              label="【答案解析】:"
            >
              <span
                class="jiexi"
                v-html="yulan.answer"
              ></span>
            </el-form-item>

            <hr>
            <!-- 题目备注 -->
            <el-form-item
              class="brr"
              label="【题目备注】:"
            >
              <span>{{yulan.remarks}}</span>
            </el-form-item>

          </el-form>
          <div class="offs">
            <el-button
              type="primary"
              size="small"
              @click='offViewBox'
            >关闭</el-button>
          </div>

        </el-dialog>

      </el-card>
    </div>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple } from '@/api/hmmm/subjects.js'
// 二级目录
import { simple as tilsSimple } from '@/api/hmmm/directorys.js'
// 标签
import { simple as tagsSimple } from '@/api/hmmm/tags.js'
// 难度  方向 试题类型
import { difficulty, direction, questionType } from '@/api/hmmm/constants.js'
// 基础题库列表
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions.js'

export default {
  name: 'qls',
  data () {
    return {
      form: {
        city: null,
        province: null,
        shortName: null,
        remarks: null,
        creatorID: null,
        direction: null,
        difficulty: null,
        questionType: null,
        keyword: null,
        tags: null,
        catalogID: null,
        subjectID: null

      },
      citySelect: {
        province: [],
        cityDate: []
      },
      // 学科列表
      subs: [],
      // 二级目录
      tils: [],
      constant: {
        // 难度
        difficults: [],
        // 方向
        directions: [],
        // 试题类型
        questionsType: []
      },
      // 标签
      Tags: [],
      // 基础题库列表
      questionsList: [],
      // 页码
      queryInfo: {
        page: 1,
        pagesize: 10,
        keyword: null
      },
      total: 0,
      listLoading: true,
      // 预览按钮 定义
      viewVisible: false,
      videoShowing: false,
      editVisible: false,
      radio: '1',
      yulan: {},
      yulanson: [],
      videoAddress: ''

    }
  },
  props: {

  },
  created () {
    this.getCityData()
    this.getSubjects()
    // 获取题库列表
    this.getQLists()
    this.getQtypes()

    this.defaultForm = JSON.parse(JSON.stringify(this.form))
  },
  mounted () {

  },
  watch: {

  },
  methods: {

    // 获取题库列表
    async getQLists (lo) {
      const { data } = await list(lo)
      // console.log(data.items)
      for (var i = 0; i < data.items.length; i++) {
        // console.log(typeof (data.items[i].question))//字符串
        data.items[i].question.replace('<', '')
        const o = data.items[i].question
        const l = data.items[i].question.indexOf('>')
        const y = data.items[i].question.lastIndexOf('<')
        // console.log(o.substring(l + 1, y))
        data.items[i].question = o.substring(l + 1, y)
        // 时间
        const nian = data.items[i].addDate
        const hh = new Date(nian)
        const year = hh.getFullYear()
        const mon = hh.getMonth() + 1 >= 10 ? hh.getMonth() + 1 : '0' + (hh.getMonth() + 1)
        const day = hh.getDate() >= 10 ? hh.getDate() : '0' + hh.getDate()

        const hour = hh.getHours() - 8 >= 10 ? hh.getHours() - 8 : '0' + (hh.getHours() - 8)
        const min = hh.getMinutes() >= 10 ? hh.getMinutes() : '0' + hh.getMinutes()
        const sec = hh.getSeconds() >= 10 ? hh.getSeconds() : '0' + hh.getSeconds()
        const all = year + '-' + mon + '-' + day + ' ' + hour + ':' + min + ':' + sec
        data.items[i].addDate = all
      }
      this.total = data.counts
      this.questionsList = data
      // console.log(this.questionsList.items[0].id)
    },

    // 每页显示信息条数
    handleSizeChange (val) {
      this.queryInfo.pagesize = val
      if (this.queryInfo.page === 1) {
        this.getQLists(this.queryInfo)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.queryInfo.page = val
      this.getQLists()
    },

    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },

    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      // this.form.city = this.citySelect.cityDate[0]
    },
    // 获取学科列表
    async getSubjects () {
      const { data } = await simple()
      this.subs = data
    },
    // 根据学科获取二级目录 以及标签
    async handleSub (id) {
      const { data } = await tilsSimple({ subjectID: id })
      this.tils = data
      const { data: res } = await tagsSimple({ subjectID: id })
      console.log(res)
      this.Tags = res
      this.form.catalogID = null
      this.form.tags = null
    },
    // 题型 方向 难度
    getQtypes: function () {
      this.constant.questionsType = questionType
      this.constant.difficults = difficulty
      this.constant.directions = direction
    },

    // 查询条件 内容重置
    resetForm () {
      this.form = JSON.parse(JSON.stringify(this.defaultForm))
    },
    // 搜索 按钮
    async search () {
      this.getQLists(this.form)
    },
    // 预览 对话框
    async viewBox (row) {
      this.viewVisible = true
      this.yulan = row
      const dataAds = this.yulan.videoURL
      this.videoAddress = dataAds
      const { data } = await detail({ id: this.yulan.id })
      this.yulanson = data
      console.log(this.yulanson)
    },
    // 预览 video
    videoShow () {
      this.videoShowing = !this.videoShowing
    },
    // 关闭 预览 对话框
    offViewBox () {
      this.viewVisible = false
    },

    // 删除 对话框
    async deleteQus (qusId) {
      this.$confirm('此操作将永久删除该题目 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: qusId })
            .then(response => {
              this.$message.success('成功删除了该题!')
              this.questionsList.items.splice(qusId, 1)
              this.getQLists()
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 添加至精选 对话框
    async addChoice (row) {
      const resConfirm = await this.$confirm('此操作将该题目添加至精选题库 ' + ', 是否继续?', '提示', {
        type: 'info'
      })
        .catch(error => error)
      // console.log(resConfirm)
      if (resConfirm !== 'confirm') {
        return this.$message.info('已取消添加')
      }
      // console.log(row.id, this.choiceState)
      const res = await choiceAdd({
        id: row.id,
        choiceState: 1
      })
      console.log(res)
      if (res.status !== 200) {
        return this.$message.error('添加精选失败')
      }
      // console.log(res)
      this.$message.success('添加精选成功')
      this.getQLists()
    }

  }
}
</script>

<style scoped lang='scss'>
// 顶部 说明文字
.info {
  overflow: hidden;
  color: pink;
  font-size: 12px;
  margin-bottom: 15px;
}
//新增试题按钮
.addbtn {
  float: right;
}
//form搜索区域
.el-form {
  .diyi,
  .dier,
  .disan {
    display: flex;
    .el-form-item {
      flex: 1;
    }
  }
  .city0 {
    .city1 {
      width: 50%;
    }
    .city2 {
      padding-left: 5px;
    }
  }
  .s-btn {
    text-align: right;
  }
}
//搜索区域下方 灰色区域
.hui {
  width: 100%;
  padding: 8px 16px;
  margin-bottom: 10px;
  background-color: #f4f4f5;
  i {
    font-size: 16px;
    width: 16px;
    vertical-align: middle;
    color: #909399;
  }
  .shuju {
    display: inline-block;
    font-size: 13px;
    padding: 10px;
    color: #909399;
  }
}

.page {
  margin-top: 10px;
  text-align: right;
}
.is-plain1 {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}
.is-plain2 {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
}
.is-plain3 {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
}
.is-plain4 {
  color: #e6a23c;
  background: #fdf6ec;
  border-color: #f5dab1;
}
// 预览  模块
.view-form {
  font-weight: normal;
  .view-con1 {
    display: flex;
    white-space: nowrap;

    .el-form-item {
      flex: 1;
      .el-form-item__label {
        font-weight: 400 !important;
      }
    }
  }
  .view-con2 {
    margin-top: -20px;
  }
  hr {
    margin-top: -10px;
  }
  .view-qus {
    margin-top: -10px;

    .tigan {
      color: #0000ff;
      margin-left: -70px;
    }
  }
  .choose {
    margin-bottom: 20px;
    .answers {
      color: #0000ff;
      text-indent: 0.5em;
    }
    .xuanze {
      display: block;
      margin-top: 15px;
    }
  }
  .video-qus {
    white-space: nowrap;
    .el-button {
      margin-left: 20px;
    }
    .video {
      width: 400px;
      height: 300px;
      margin-top: -40px;
      margin-bottom: -10px;
    }
  }
  .brr {
    white-space: nowrap;
    span {
      margin-left: 20px;
    }
  }
  .brr1 {
    margin-bottom: -10px;
  }
  .jiexi {
    display: inline-block;
    margin-top: -100px;
  }
}
.offs {
  text-align: right;
}
</style>
